<template>
  <div class="projects-container">
    <header class="page-header">
      <h1>项目广场</h1>
      <p class="subtitle">发现优质开源项目，寻找灵感，参与贡献</p>
    </header>

    <!-- 搜索和筛选区 -->
    <div class="search-filter">
      <div class="search-box">
        <input type="text" placeholder="搜索项目...">
      </div>
      <div class="filter-section">
        <div class="filter-group">
          <h4>技术栈</h4>
          <div class="filter-tags">
            <span class="tag">Vue</span>
            <span class="tag">React</span>
            <span class="tag">Spring Boot</span>
            <span class="tag">Node.js</span>
          </div>
        </div>
        <div class="filter-group">
          <h4>项目类型</h4>
          <div class="filter-tags">
            <span class="tag">全栈应用</span>
            <span class="tag">后端服务</span>
            <span class="tag">前端组件</span>
            <span class="tag">工具库</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-grid">
      <div class="project-card">
        <div class="project-header">
          <img src="https://placeholder.co/60" alt="项目logo" class="project-logo">
          <div class="project-meta">
            <h3>Vue 电商后台</h3>
            <div class="stats">
              <span>⭐️ 1.2k</span>
              <span>🔄 230</span>
            </div>
          </div>
        </div>
        <p class="description">
          基于 Vue 3 + TypeScript 的现代电商后台管理系统，包含完整的权限管理、商品管理、订单处理等功能
        </p>
        <div class="tech-stack">
          <span class="tech">Vue 3</span>
          <span class="tech">TypeScript</span>
          <span class="tech">Vite</span>
        </div>
        <div class="actions">
          <button class="btn-primary">在线预览</button>
          <button class="btn-secondary">源码仓库</button>
        </div>
      </div>

      <div class="project-card">
        <div class="project-header">
          <img src="https://placeholder.co/60" alt="项目logo" class="project-logo">
          <div class="project-meta">
            <h3>Spring Cloud 微服务模板</h3>
            <div class="stats">
              <span>⭐️ 2.5k</span>
              <span>🔄 460</span>
            </div>
          </div>
        </div>
        <p class="description">
          企业级 Spring Cloud 微服务架构模板，整合最佳实践，包含服务注册、配置中心、链路追踪等组件
        </p>
        <div class="tech-stack">
          <span class="tech">Java</span>
          <span class="tech">Spring Cloud</span>
          <span class="tech">Docker</span>
        </div>
        <div class="actions">
          <button class="btn-primary">快速开始</button>
          <button class="btn-secondary">源码仓库</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.projects-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2rem;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.subtitle {
  color: var(--gray-600);
}

.search-filter {
  margin-bottom: 2rem;
}

.search-box {
  margin-bottom: 1.5rem;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-size: 1rem;
}

.filter-section {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

.filter-group h4 {
  margin-bottom: 0.75rem;
  color: var(--gray-700);
  font-weight: 500;
}

.filter-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s;
}

.tag:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}

.project-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.project-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.project-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
}

.project-meta {
  flex: 1;
}

.project-meta h3 {
  font-size: 1.25rem;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.stats {
  display: flex;
  gap: 1rem;
  color: var(--gray-600);
  font-size: 0.875rem;
}

.description {
  color: var(--gray-600);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.tech-stack {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tech {
  padding: 0.25rem 0.75rem;
  background: var(--gray-100);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--gray-700);
}

.actions {
  display: flex;
  gap: 1rem;
}

.actions button {
  flex: 1;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary-600);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: var(--primary-700);
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.btn-secondary:hover {
  background: var(--gray-200);
}

@media (max-width: 768px) {
  .projects-container {
    padding: 1rem;
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .project-card {
    padding: 1rem;
  }
}
</style> 